<template>
  <view class="order-success-page">
    <!-- 成功图标区域 -->
    <view class="icon-container">
      <view class="success-icon">
        <text class="checkmark">✔</text>
      </view>
    </view>
    
    <!-- 支付成功提示 -->
    <text class="success-text">支付成功</text>
    
    <!-- 支付详情 -->
    <view class="details">
      <text class="amount">支付金额：¥{{ paymentAmount }}</text>
      <text class="reservation">预约编号：{{ reservationNumber }}</text>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="buttons">
      <button class="btn home-btn" @click="goHome">返回首页</button>
      <button class="btn order-btn" @click="goOrderDetail">订单详情</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 响应式数据
const paymentAmount = ref('0.00');
const reservationNumber = ref('');

// 页面初始化，支持通过页面参数传入支付金额或预约编号
onLoad((options) => {
  paymentAmount.value = options.amount || '0.00';
  reservationNumber.value = options.reservationNumber || Date.now().toString();
});

// 返回首页
const goHome = () => {
  uni.reLaunch({
    url: '/pages/index'
  });
};

// 跳转到订单详情页面
const goOrderDetail = () => {
  uni.navigateTo({
    url: '/pages/zhuanyexiche/WashCarInfo/OrderConfirm/order-detail/order-detail'
  });
};
</script>

<style>
.order-success-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 20rpx;
  background-color: #f5f5f5;
  height: 100%;
}

.icon-container {
  margin-top: 80rpx;
  margin-bottom: 40rpx;
}

.success-icon {
  width: 200rpx;
  height: 200rpx;
  border-radius: 100rpx;
  background-color: #07c160; /* 绿色圆形背景 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkmark {
  font-size: 120rpx;
  color: #fff;
}

.success-text {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 40rpx;
}

.details {
  margin-bottom: 60rpx;
  text-align: center;
}

.amount,
.reservation {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.buttons {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.btn {
  flex: 1;
  margin: 0 20rpx;
  padding: 20rpx 0;
  font-size: 28rpx;
  border: none;
  border-radius: 10rpx;
}

.home-btn {
  background-color: #2196F3; /* 蓝色 */
  color: #fff;
}

.order-btn {
  background-color: #CCCCCC; /* 灰色 */
  color: #fff;
}
</style>
